@import '../mixins/input.less';
@import '../mixins/common.less';
@import '../custom.less';
@import '../transition/zoom-in-top.less';
@import '../transition/search-line.less';
@import '../transition/icon.less';

@search-prefix-cls: ~'@{css-prefix}search';

.@{search-prefix-cls} {
  @apply relative;
  @apply inline-block;
  @apply text-xs;
  @apply w-full;

  & &__line {
    @apply inline-table;
    @apply w-full;
    @apply h-7;
    @apply border border-solid border-color-border;
    @apply rounded-sm;
    @apply bg-color-bg-1;
    transition: 0.4s;
    @apply border-separate;
    @apply pr-1;

    &:hover {
      @apply border-color-border-hover;
    }

    &.focus,
    &:focus {
      @apply border-color-border-focus;
    }
  }

  & &__present,
  & &__input,
  & &__input-btn {
    @apply table-cell;
    @apply relative;
    @apply align-middle;
    @apply right-0;
  }

  & &__input {
    @apply w-full;
    height: 26px;
    line-height: 26px;
    @apply text-color-text-primary;
    @apply pl-3;
    @apply pr-2;
    @apply border-0;
    @apply outline-0;
    @apply bg-transparent;
    @apply text-xs;
    .placeholder(@color: theme('colors.color.text.placeholder'));

    &:focus {
      @apply caret-color-brand;
    }
  }

  & &__input-btn {
    @apply w-8;
    height: 26px;
    @apply py-0 px-2;
    @apply text-center;

    a {
      @apply no-underline;
      @apply block;
      line-height: 26px;
    }

    svg {
      @apply fill-color-text-placeholder;
      @apply text-base;
      @apply align-text-bottom;
    }

    &:hover svg {
      @apply fill-color-brand-hover;
    }
  }

  & &__present {
    @apply text-color-text-primary;
    line-height: 26px;
    @apply table-cell;
    @apply pl-2;
    @apply w-px;
    @apply whitespace-nowrap;
    @apply border-r border-r-color-border;

    .icon-outer {
      @apply ~"h-4.5";
      line-height: 18px;
      @apply inline-block;
      @apply py-0 pr-2 pl-1;
      @apply cursor-pointer;

      svg {
        @apply text-sm;
        @apply fill-color-icon-primary;
        @apply ~"mb-0.5";
      }
    }
  }

  & &__selector {
    @apply absolute;
    @apply top-7;
    @apply left-0;
    @apply overflow-hidden;
    min-width: 68px;
    @apply border border-solid border-color-border;
    @apply rounded-sm;
    @apply text-xs;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    @apply bg-color-bg-1;
    @apply text-color-text-primary;
    @apply ~'mt-0.5';
  }

  & &__selector-body {
    max-height: 300px;
    @apply overflow-y-auto;
    @apply overflow-x-hidden;
  }

  & &__poplist-item {
    min-height: 28px;
    @apply py-0 px-2;
    @apply leading-7;
    @apply ~"max-w-[100%]";
    @apply text-xs;
    @apply overflow-hidden;
    @apply text-left;
    @apply text-ellipsis;
    @apply whitespace-nowrap;

    &:hover {
      @apply bg-color-bg-2;
      @apply cursor-pointer;
    }

    span {
      @apply text-xs;
    }

    .icon-check {
      @apply text-base;

      &:hover {
        @apply text-color-brand-hover;
      }
    }
  }

  &.mini &__line {
    border-radius: 30px;
    @apply w-full;
    float: right;
  }

  &.mini.collapse &__input-btn {
    svg {
      @apply fill-color-icon-secondary;
    }
  }

  &.mini &__input {
    border-radius: 30px;
  }

  &.collapse &__input {
    @apply p-0;
    width: 30px;
    float: right;
  }

  &.mini.collapse &__line {
    width: 30px;
    float: right;
    @apply bg-transparent;
    @apply border-separate;
  }

  &.mini.collapse &__present,
  &.mini.collapse &__input {
    @apply hidden;
  }

  .fade-enter-to {
    @apply opacity-0;
  }

  .fade-enter,
  .fade-leave-to {
    @apply opacity-0;
  }
}
